<template>
    <div class="tableBox">
        <!-- 第一层 箱-->
        <div class="tableList " v-for="(item,index) in dataList" :key="item.Id">
            <div :class="['list xiangLevel',{'abnormalBox':abnormal}]">
                <img v-if="item.Abnormal" src="../assets/img/abnormal.png" alt="" class="leftAbnormalBox">
                <div class="barcodeBox">{{item.Barcode}}</div>
                <div class="fieldBox">
                    <div class="orderNoBox">{{item.OrderNo}}</div>
                    <div class="levelBox">{{item.Level}}</div>
                    <div class="rationBox">{{item.Ration}}</div>
                </div>
            </div>
            <!-- 第二层 盒-->
            <div class="boxChildren " v-if="item.Children.length>0">
                <div class="tableList" v-for="(item1,index1) in item.Children" :key="item1.Id">
                    <div :class="['list heLevel',{'abnormalBox':abnormal}]" @click="heClick(item1,index1)">
                        <img v-if="item1.Abnormal" src="../assets/img/abnormal.png" alt="" class="leftAbnormalBox">
                        <div class="barcodeBox">{{item1.Barcode}}
                            <div class="showIcon" v-if="item1.Children.length>0">
                                <div :class="item1.isShow === false ? 'notShow':'showAll' "></div>
                            </div>
                            
                        </div>
                        <div class="fieldBox">
                            <div class="orderNoBox">{{item1.OrderNo}}</div>
                            <div class="levelBox">{{item1.Level}}</div>
                            <div class="rationBox">{{item1.Ration}}</div>
                        </div>
                    </div>
                    <!-- 第三层 袋-->
                    <div class="boxChildren " v-show="item1.isShow">
                        <div class="tableList" v-for="(item2,index2) in item1.Children" :key="item2.Id">
                            <div :class="['list daiLevel',{'abnormalBox':abnormal}]" @click="daiClick(item2,index1,index2)">
                                <img v-if="item2.Abnormal" src="../assets/img/abnormal.png" alt="" class="leftAbnormalBox">
                                <div class="barcodeBox">{{item2.Barcode}}
                                    <div class="showIcon" v-if="item2.Children.length>0">
                                        <div :class="item2.isShow === false ? 'notShow':'showAll' "></div>
                                    </div>
                                </div>
                                <div class="fieldBox">
                                    <div class="orderNoBox">{{item2.OrderNo}}</div>
                                    <div class="levelBox">{{item2.Level}}</div>
                                    <div class="rationBox">{{item2.Ration}}</div>
                                </div>
                            </div>
                            <!-- 第四层 单体-->
                            <div class="boxChildren " v-show="item2.isShow">
                                <div class="tableList" v-for="(item3,index3) in item2.Children" :key="index3">
                                    <div :class="['list dantiLevel',{'abnormalBox':abnormal}]">
                                        <div class="barcodeBox">{{item3.Barcode}}</div>
                                        <div class="fieldBox">
                                            <div class="orderNoBox">{{item3.OrderNo}}</div>
                                            <div class="levelBox">{{item3.Level}}</div>
                                            <div class="rationBox">{{item3.Ration}}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Table",
        props: {
            dataList: {
                type: Array,
                default() {
                    return []
                }
            },
            abnormal:{
                type:Boolean,
                default() {
                    return false
                }
            }
        },
        methods: {
            //盒事件
            heClick(item, index) {
                this.$emit("heClick",item,index)
            },
            //袋事件
            daiClick(item, parerentIndex,index){
                this.$emit("daiClick",item, parerentIndex, index)
            }
        }
    }
</script>

<style lang="less" scoped>
.tableBox{
    background-color: #fff;
    width: 100vw;
}
.tableList {
    .list {
        padding: .277778rem .37037rem .277778rem .555556rem;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 13px;
        font-weight: 500;
        position: relative;
        margin-bottom: 3px;
        background-color: #fff;
        position: relative;
        .leftAbnormalBox {
            position: absolute;
            left: .092593rem;
            top: 50%;
            transform: translate(0,-50%);
            width: 16px;
            height:16px;
        }
        .barcodeBox {
            flex-basis: 48%;
            position: relative;
            word-break: break-all;
            .showIcon {
                .notShow {
                    position: absolute;
                    top: 50%;
                    transform: translate(0,-50%);
                    left: -10px;
                    width: 0px;
                    border-width: 5px;
                    border-style: dashed dashed dashed solid;
                    border-color: transparent transparent transparent #6D7278;
                }
                .showAll {
                    position: absolute;
                    top: 60%;
                    transform: translate(0,-60%);
                    left: -10px;
                    width: 0px;
                    border-width: 5px;
                    border-style: solid dashed dashed dashed;
                    border-color: #6D7278 transparent transparent transparent;
                }
            }
            
        }
        .fieldBox {
            display: flex;
            flex-basis: 52%;
            justify-content: space-between;
            align-items: center;
            .orderNoBox {
                flex-basis: 65%;
                padding-left: 8px;
            }
            .levelBox {
                flex-basis: 20%;
                flex-shrink: 1;
                flex-grow: 0;
            }
            .rationBox {
                flex-basis: 15%;
                flex-shrink: 0;
                flex-grow: 0;
            }
        }
    }
    .abnormalBox {
        padding-left: .925926rem!important;
    }
}
//箱层级样式
.xiangLevel {
    background-color:  #E9F1FA!important;
}
//盒层级样式
.heLevel {
    background-color:  #ECE9FA!important;
}
//盒层级样式
.daiLevel {
    background-color:  #FFECE9!important;
}
//盒层级样式
.dantiLevel {
    background-color:  #FAF6E9!important;
}
</style>